<?php
    include('top.php');
    if (file_exists('sql.php')) {
?>
    <style>
        .index_banner {
            background-image: url('<?php echo $web_info_row['banner']; ?>');
            margin: 0 auto;
            height: 500px;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 110% 100%;
            position: relative;
        }
        
        #alert {
            display: none;
        }
    </style>

    <div class="index_banner">
        <div class="index_form">
            <div class="index_input_form">
                <form id="loginForm" method="post">
                    <p>证件号：</p>
                    <p>
                        <input type="text" class="index_input" name="number" placeholder="请输入证件号">
                    </p>
                    <p>密码：</p>
                    <p>
                        <input type="password" class="index_input" name="password" placeholder="请输入密码">
                    </p>
                    <p>
                        <button class="input_submit">登入</button>
                    </p>
                    <p class="reg">
                        <?php if (empty($web_info_row['reg'])) { ?>
                        <a target="_blank" style="color: #ffa800; font: 600 14px/30px "宋体";"><B>请使用证件号和密码登录</B></a>
                        <?php } else { ?>
                            <a href="reg.php" class="index-reg">第一次登入？请快速立即注册。</a>
                        <?php } ?>
                    </p>
                </form>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="box">
            <div class="flex-container">
                <div class="flex-item">
                    <img src="/static/img/notice.gif" style="padding-bottom: 12px; padding-top: 12px;" />
                </div>
            </div>
            <div class="flex-item" style="text-align: right;"><a class="index" href="list.php">更多...</a></div>
            <?php
                $sql = "select * from article ORDER BY id DESC LIMIT 5";
                $result = $link->query($sql);
                while($row = mysqli_fetch_array($result)) { ?>
                <div class="flex-container">
                    <div class="flex-item">· <a href="article.php?id=<?php echo $row['id']; ?>" class="index"><?php $title = $row['title']; if (mb_strlen($title, 'UTF-8') > 18) { echo $shortTitle = mb_substr($title, 0, 18, 'UTF-8') . '...'; } else { echo $shortTitle = $title; } ?></a></div>
                    <div class="flex-item" style="text-align: right;">
                        <?php echo date("Y-m-d", $row['time']) ?>
                    </div>
                </div>
                <?php } ?>
        </div>
        <div class="box">
            <img src="/static/img/tel.gif" style="padding-bottom: 12px; padding-top: 12px;" />
            <h3>咨询电话：<?php echo $web_info_row['tel']; ?></h3>
            <p>邮箱:
                <?php echo $web_info_row['mail']; ?>
            </p>
            <p>地址：
                <?php echo $web_info_row['address']; ?>
            </p>
        </div>
    </div>
    <div>
    <div class="ui_div_border" id="ui_div_border">
        <table class="ui_border ui_state_visible ui_state_focus ui_state_lock" id="alert">
            <tbody>
                <tr>
                    <td class="ui_lt"></td>
                    <td class="ui_t"></td>
                    <td class="ui_rt"></td>
                </tr>
                <tr>
                    <td class="ui_l"></td>
                    <td class="ui_c">
                        <div class="ui_inner">
                            <table class="ui_dialog">
                                <tbody>
                                    <tr>
                                        <td colspan="2">
                                            <div class="ui_title_bar">
                                                <div class="ui_title" unselectable="on" style="cursor: move;">警告</div>
                                                <div class="ui_title_buttons"><a class="ui_close" href="javascript:void(0);" title="关闭(esc键)" style="display: inline-block;">×</a></div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="ui_icon" style=""><img src="/static/img/alert.gif" class="ui_icon_bg"></td>
                                        <td class="ui_main" style="width: 200px; height: auto;">
                                            <div class="ui_content" style="padding: 10px;" id="message_alert"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <div class="ui_buttons" style="">
                                                <input type="button" value="确定" class="ui_state_highlight" onclick="location.href='home.php';">
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                    <td class="ui_r"></td>
                </tr>
                <tr>
                    <td class="ui_lb"></td>
                    <td class="ui_b"></td>
                    <td class="ui_rb" style="cursor: auto;"></td>
                </tr>
            </tbody>
        </table>
    </div>
    </div>

    <script type="text/javascript">
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            var formData = new FormData(this);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'login.php', true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {

                    var response = JSON.parse(xhr.responseText);

                    document.getElementById('message_alert').innerHTML = response.message;

                    document.getElementById('alert').style.display = 'table';
                }
            };
            xhr.send(formData);
        });
        
        const closeButton = document.querySelector('.ui_close');
        const confirmButton = document.querySelector('.ui_state_highlight');
        const uiDivBorder = document.getElementById('ui_div_border');
        
        closeButton.addEventListener('click', function() {
            uiDivBorder.style.visibility = 'hidden';
        });
        
        confirmButton.addEventListener('click', function() {
            uiDivBorder.style.visibility = 'hidden';
        });
        
    </script>
    <?php
    include('bottom.php');
    } else {}
?>